<!DOCTYPE html>
<html>
<head>
    <title>酒店列表</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <link href="/css/base.css" type="text/css" rel="stylesheet" />
    <script src="/js/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/travel.css"/>
    <script src="/js/plugins/jrender/jrender.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog/dialog.css">
    <script src="/js/plugins/dialog/dialog.min.js"></script>
    <script src="/js/plugins/jquery-form/jquery.form.js"></script>
    <script src="/js/common.js"></script>
    <script type="text/javascript" src="js/jquery/jquery.select.js"></script>
    <style>
        *{margin:0;paddign:0;font-family:"微软雅黑";font-style:normal;font-size:14px;}
        .dropdown{position: relative;display:inline-block;width: 300px;padding-left:10px; }
        .dropdown-selected{width: 100%!important;height:30px;line-height:30px;border:1px solid #c6c8cc;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;color:#333;text-indent: 10px;margin-bottom: 0!important;}
        .dropdown ul{padding:0;width:100%;max-height:200px;overflow-y:auto ;background-color:#fff;margin-top:2px;border:1px solid #c6c8cc;position:absolute;display:none;z-index: 2;}
        .dropdown ul li{list-style: none;text-indent:10px;}
        .dropdown ul li a{display:block;color:#282c33;text-decoration:none;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
        .dropdown ul li:hover{background-color:#f2f6fa;}
        .dropdown ul li a:active,.dropdown ul li.active a{background-color: #e4e9f2;}
        .box .f20{ font-size:20px}
    </style>
</head>

<body>
<div class="search-head">
    <div class="row nav-search">
        <div class="col-2">
            <a href="index.html">
                <span><i class="fa fa-chevron-left fa-2x"></i></span>
            </a>
        </div>
        <div class="col-10">
        </div>
    </div>
</div>

<div class="search radius6">
    <form id="searchform" name="searchform" method="get" action="/hotels">
        <input type="hidden" name="currentPage" value="1">
        <select class="form-control" name="type">

            <option value="-1">全部</option>
            <option value="5">豪华型</option>
            <option value="4">高档型</option>
            <option value="3">情侣酒店</option>
            <option value="2">青年旅社</option>
            <option value="1">民宿</option>
        </select>

        <div class="form-group" >
            <div >
                <div class="dropdown" id="search" onclick="search.changeValue(this);search.searchKeyword()">
                    <input type="text" width="120px" class="dropdown-selected"
                           id="search-input" placeholder="请输入关键字" name="keyword" onkeyup="search.searchKeyword();">
                   <!-- <ul>
                        <li><a href="javaScript:">   </a></li>
                        <li><a href="javaScript:">云上小筑客栈</a></li>
                        <li><a href="javaScript:">北京速8酒店</a></li>
                        <li><a href="javaScript:">7天连锁酒店</a></li>
                        <li><a href="javaScript:">爱温蒂主题酒店</a></li>
                    </ul>-->
                </div>
            </div>
            <div class="col-lg-6">
                <input class="btn btn-info submitBtn" type="submit" value="搜索">
            </div>
        </div>
    </form>
</div>

<div class="container travels">
    <h6>酒店列表</h6>
    <div id="allTravels" render-loop="list">
     
        <div class="row detail">
            <div class="col bigimg">
                <a href="hotelDetails.html" render-key="list.id" render-fun="handle">
                    <img render-src="list.coverUrl">
                </a>
            </div>
            <div class="col">
                <a href="#" render-key="list.id" render-fun="handle">
                    <h4  render-html="list.name"></h4>
                </a>
                <br/>
                <br/>
                <p>
                    <a href="userProfiles.html" >
                        <span render-html="list.location"></span>
                    </a>
                    <br/>
                    <br/>
                    <span render-html="list.typeName">

                    </span>
                    <br/>

                    ¥<span class="addr f20" render-html="list.price" style="color: #F44336" size="15"></span>起
                </p>
            </div>

        </div>
    </div>
</div>

<script>
    var currentPage = 1; //当前页
    var pages; //总页数
    var travels; //游记数组

    function renderViews(data) {
        $(".travels").renderValues(data, {
            handle: function (ele, value) {
                $(ele).attr("href", "/hotelDetails.html?hotelId="+value);
            }
        });
    }

    $(function () {
        
        
        $(".submitBtn").click(function () {
            $("#searchform").ajaxForm(function (data) {
                console.log(data);
                renderViews(data);
                currentPage=1;
                pages = data.pages;
                travels = data.list;

            })
        });


        //发送ajax请求,获取所有酒店
        $.get("/hotels", {pageSize: 5}, function (data) {
            //数据渲染
            renderViews(data);
            pages = data.pages;
            travels = data.list;
        });

        //设置窗口的滚到事件
        $(window).scroll(function () {
            if (isEnd()) {
                if (currentPage < pages) {
                    currentPage++;
                    var args = {currentPage: currentPage, pageSize: 5};
                    $.get("/hotels", args, function (data) {
                        //数据渲染
                        $.merge(travels, data.list);
                        renderViews({list: travels});
                    });
                } else {
                    setTimeout(function () {
                        $(document).dialog({
                            type : "notice",
                            infoText: "已经到底部了",
                            autoClose: 1500,
                            position: "bottom"
                        });
                    },50);
                }
            }
        });


    });
    //关键字框
    var search = {
        searchKeyword: function () {
            var nWord = $("#search-input").val();
            //var temarray = nWord.split(""); //分割
            var array=this.unique(nWord.split(""));
            var dsa = $("#search").find("ul li a");//获取全部列表
            var linumber = 0;

            $("#search ul li").show();
            for (var t = 0; t < dsa.length; t++) {
                $(dsa[t]).html($(dsa[t]).text());
                var temstr = ($(dsa[t]).text()).split("");
                var yes = false;
                for (var i = 0; i < array.length; i++) {
                    var posarr = this.findAll(temstr, array[i]);
                    if (posarr.length > 0) {
                        yes = true;
                        for (var j = 0; j < posarr.length; j++) {
                            temstr[posarr[j]] = "<em style='color:red;'>" + temstr[posarr[j]] + "</em>";
                        }
                    }
                }
                if (!yes) {
                    $(dsa[t]).closest("li").hide();
                }
                else {
                    linumber++;
                    var htmlstr = "";
                    for (var m = 0; m < temstr.length; m++) {
                        htmlstr += temstr[m];
                    }
                    $(dsa[t]).html(htmlstr);
                }

            }
            if (linumber == 0) {
                $("#search ul li").show();
                $("#search ul").slideDown(200);
            }
        },
        findAll: function (arr, str) {
            var results = [],
                len = arr.length,
                pos = 0;
            while (pos < len) {
                pos = arr.indexOf(str, pos);
                if (pos === -1) {
                    break;
                }
                results.push(pos);
                pos++;
            }
            return results;
        },
        unique: function (arr) {
            var new_arr = [];
            for (var i = 0; i < arr.length; i++) {
                var items = arr[i];
                //判断元素是否存在于new_arr中，如果不存在则插入到new_arr的最后
                if ($.inArray(items, new_arr) == -1) {
                    new_arr.push(items);
                }
            }
            return new_arr;
        },
        changeValue: function (obj) {
            $('.dropdown ul').slideUp(200);
            var input = $(obj).find('.dropdown-selected');
            var ul = $(obj).find('ul');
            if (!ul.is(':visible')) {
                ul.slideDown('fast');
            } else {
                ul.slideUp('fast');
            }

            $(obj).find('ul a').click(function () {
                input.val($(this).text());
                $(this).parent().addClass('active');
                $(this).parent().siblings().removeClass('active')
                $(this).closest('ul').slideUp(200);
                return false;
            })
            var e = this.getEvent();
            window.event ? e.cancelBubble = true : e.stopPropagation();
        },
        _init: function () {
            $("#search").on("click", "ul li a", function () {
                $("#search-input").val($(this).text());
                $(this).parent().addClass('active');
                $(this).parent().siblings().removeClass('active')
                $(this).closest('ul').slideUp(200);
                return false;
            })
        },
        getEvent: function(){
            if(window.event){
                return window.event;
            }
            var f = arguments.callee.caller;
            do{
                var e = f.arguments[0];
                if(e && (e.constructor === Event || e.constructor===MouseEvent || e.constructor===KeyboardEvent)){
                    return e;
                }
            }while(f=f.caller);
        }

    }

    search._init();


</script>

</body>

</html>